import { Layout, Breadcrumb } from 'antd';
import { FC, useState } from 'react';
import { Index as Header } from './compinnets/header';
import './index.less';
import { MenuComponnet as Menu } from './compinnets/menu';
import { Redirect, IRouteComponentProps } from 'umi';

const { Content, Footer, Sider } = Layout;

const SiderDemo: FC<IRouteComponentProps> = ({
  location,
  children,
}: IRouteComponentProps) => {
  const [collapsed, set_collapsed] = useState<boolean>(false);
  const onCollapse = (collapsed: boolean) => {
    console.log(collapsed);
    set_collapsed(collapsed);
  };
  return (
    <Layout style={{ minHeight: '100vh' }}>
      <Sider collapsible collapsed={collapsed} onCollapse={onCollapse}>
        <div className="logo" />
        <Menu />
      </Sider>
      <Layout className="site-layout">
        <Header />
        <Content style={{ margin: '0 16px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>User</Breadcrumb.Item>
            <Breadcrumb.Item>Bill</Breadcrumb.Item>
          </Breadcrumb>
          <div
            className="site-layout-background"
            style={{ padding: 24, minHeight: 360 }}
          >
            {children}
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          王洋昆 ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>
  );
};

export default SiderDemo;
